<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide()"
      :mask-closable="false"
      width="1150"
    >
      <Form
        :model="orderInfo"
        :label-width="120"
        ref="formRef"
        :rules="ruleInline"
      >
        <Row :gutter="16">
          <Col span="24">
            <Input
              type="textarea"
              v-model="addressText"
              placeholder="输入地址识别"
            ></Input>
          </Col>
        </Row>
        <div :gutter="16" style="width: 100%; display: flex;">
          <Button
            style="margin-right: 10px;"
            @click="translateHandle(1)"
            type="primary"
          >
            全部识别
          </Button>
          <Button
            style="margin-right: 10px;"
            @click="translateHandle(2)"
            type="primary"
          >
            取件识别
          </Button>
          <Button
            style="margin-right: 10px;"
            @click="translateHandle(3)"
            type="primary"
          >
            收件识别
          </Button>
          <Button style="margin-right: 10px;" @click="clearHandle">清空</Button>
        </div>
        <Divider orientation="center">基本信息</Divider>
        <Row :gutter="16">
          <!-- <Col span="12">
            <FormItem label="核销码">
              <Input
                v-model.trim="orderInfo.voucherCode"
                placeholder="请输入核销码"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="手机号码">
              <Input
                v-model.trim="orderInfo.username"
                placeholder="请输入手机号码"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="商品名称">
              <Input
                v-model.trim="orderInfo.goodsName"
                placeholder="请输入商品名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="售价">
              <Input
                v-model.trim="orderInfo.totalAmount"
                placeholder="请输入售价"
              ></Input>
            </FormItem>
          </Col> -->
          <Col span="12">
            <FormItem label="清洗件数" prop="goodsNum">
              <Input
                v-model.trim="orderInfo.goodsNum"
                placeholder="请输入清洗件数"
              ></Input>
            </FormItem>
          </Col>

          <!-- <Col span="12">
            <FormItem label="核销门店">
              <Input
                v-model.trim="orderInfo.poiName"
                placeholder="请输入核销门店"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="核销时间">
              <DatePicker
                type="datetime"
                placeholder="请输入核销时间"
                :value="orderInfo.voucherTime"
                @on-change="val => timeChange('voucherTime', val)"
              ></DatePicker>
            </FormItem>
          </Col> -->
          <Col span="12">
            <FormItem label="订单来源" prop="plantType">
              <Select
                v-model="orderInfo.plantType"
                style=""
                placeholder="请输入订单来源"
              >
                <Option :value="1">
                  快手
                </Option>
                <Option :value="2">
                  美团
                </Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Divider orientation="center">地址信息</Divider>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="取件联系人" prop="takeMan">
              <Input
                v-model.trim="orderInfo.takeMan"
                placeholder="请输入取件联系人"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="取件联系电话" prop="takePhone">
              <Input
                v-model.trim="orderInfo.takePhone"
                placeholder="请输入取件联系电话"
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="取件地区" prop="takeCounty">
              <Row>
                <Col span="8">
                  <Select
                    v-model="orderInfo.takeProvince"
                    style=""
                    placeholder="选择省"
                  >
                    <Option
                      v-for="item in regionDataList"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.takeCity"
                    style=""
                    placeholder="选择市"
                  >
                    <Option
                      v-for="item in regionDataList2"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.takeCounty"
                    style=""
                    placeholder="选择区"
                  >
                    <Option
                      v-for="item in regionDataList3"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="取件地址" prop="takeAddress">
              <Input
                v-model.trim="orderInfo.takeAddress"
                placeholder="请输入取件地址"
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="取件预约时间" prop="selectTime">
              <div style="display: flex;">
                <DatePicker
                  type="date"
                  placeholder="请输入取件预约开始时间"
                  format="yyyy-MM-dd"
                  style="width: 250px;"
                  :value="orderInfo.selectDate"
                  @on-change="timeChange"
                ></DatePicker>
                <Select v-model="orderInfo.selectTime">
                  <Option v-for="item in timeList" :value="item">
                    {{ item }}
                  </Option>
                </Select>
              </div>
            </FormItem>
          </Col>
        </Row>

        <Row :gutter="16">
          <Col span="12">
            <FormItem label="收件联系人" prop="backMan">
              <Input
                v-model.trim="orderInfo.backMan"
                placeholder="请输入收件联系人"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="收件联系电话" prop="backPhone">
              <Input
                v-model.trim="orderInfo.backPhone"
                placeholder="请输入收件联系电话"
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="收件地区" prop="backCounty">
              <Row>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backProvince"
                    style=""
                    placeholder="选择省"
                  >
                    <Option
                      v-for="item in regionDataList"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backCity"
                    style=""
                    placeholder="选择市"
                  >
                    <Option
                      v-for="item in regionDataList4"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <Col span="8">
                  <Select
                    v-model="orderInfo.backCounty"
                    style=""
                    placeholder="选择区"
                  >
                    <Option
                      v-for="item in regionDataList5"
                      :value="item.label"
                      :key="item.label"
                    >
                      {{ item.label }}
                    </Option>
                  </Select>
                </Col>
              </Row>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="收件地址" prop="backAddress">
              <Input
                v-model.trim="orderInfo.backAddress"
                placeholder="请输入收件地址"
              ></Input>
            </FormItem>
          </Col>
        </Row>

        <!-- <Divider orientation="center">工厂备注</Divider>
        <Row :gutter="16">
          <Col span="24">
            <div>{{ orderInfo.orderMall.factoryRemark }}</div>
          </Col>
        </Row> -->
        <Divider orientation="center">运营备注</Divider>
        <Row :gutter="16">
          <Col span="24">
            <Input
              type="textarea"
              v-model="orderInfo.operateRemark"
              placeholder="运营备注"
            ></Input>
          </Col>
        </Row>
      </Form>
      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button @click="confirm" type="primary">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import { trim, replace, get } from 'lodash';
  function genTimeList() {
    let arr = [9, 19];
    let result = [];
    for (let index = arr[0]; index <= arr[1]; index++) {
      let hour = index;
      if (Number(index) < 10) {
        hour = `0${index}`;
      }
      result.push(`${hour}:00:00-${hour}:59:59`);
    }
    return result;
  }

  export default {
    name: 'order-ope',
    data() {
      return {
        ruleInline: {
          goodsNum: [
            {
              required: true,
              message: '请输入清洗件数',
              trigger: 'blur'
            }
          ],
          takeMan: [
            {
              required: true,
              message: '请输入取件联系人',
              trigger: 'blur'
            }
          ],
          takePhone: [
            {
              required: true,
              message: '请输入取件联系方式',
              trigger: 'blur'
            }
          ],
          takeAddress: [
            {
              required: true,
              message: '选择取件地址',
              trigger: 'blur'
            }
          ],
          takeProvince: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          takeCity: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          takeCounty: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          backProvince: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          backCity: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          backCounty: [
            {
              required: true,
              message: '选择取件地区',
              trigger: 'blur'
            }
          ],
          selectTime: [
            {
              required: true,
              message: '选择取件时间',
              trigger: 'blur'
            }
          ],
          backMan: [
            {
              required: true,
              message: '选择收件人',
              trigger: 'blur'
            }
          ],
          backPhone: [
            {
              required: true,
              message: '选择收件联系方式',
              trigger: 'blur'
            }
          ],
          backAddress: [
            {
              required: true,
              message: '选择收件地址',
              trigger: 'blur'
            }
          ]
        },
        selectTime: '',
        selectDate: '',
        isShowModal: false,
        loadingBtn: false,
        orderInfo: {
          plantType: 2,
          voucherCode: '',
          goodsNum: '',
          username: '',
          totalAmount: '',
          takeProvince: '',
          takeCity: '',
          takeCounty: '',
          backProvince: '',
          backCity: '',
          backCounty: ''
        },
        isSend: false,
        addressText: '',
        goodsSkuInfo: {},
        title: '手动录入',
        timeList: genTimeList()
      };
    },
    computed: {
      takePreTimeStart() {
        const date = this.orderInfo.selectDate;
        const time = get(this.orderInfo, 'selectTime', '-').split('-')[0];
        console.log(time, date, 'takePreTimeStart');
        if (!date || !time) {
          return '';
        }
        return `${date} ${time}`;
      },
      takePreTimeEnd() {
        const date = this.orderInfo.selectDate;
        const time = get(this.orderInfo, 'selectTime', '-').split('-')[1];
        console.log(time, date, 'takePreTimeEnd');
        if (!date || !time) {
          return '';
        }
        return `${date} ${time}`;
      },
      regionDataList2() {
        console.log(this.regionDataList, 'this.regionDataList')
        if (this.orderInfo.takeProvince) {
          const takeProvinceObj = this.regionDataList.find(
            item => item.label == this.orderInfo.takeProvince
          );
          return takeProvinceObj?.children || [];
        } else {
          return [];
        }
      },
      regionDataList3() {
        if (this.regionDataList2.length == 1) {
          this.orderInfo.takeCity = this.regionDataList2[0].label
        }
        if (this.orderInfo.takeCity) {
          const takeCityObj = this.regionDataList2.find(
            item => item.label == this.orderInfo.takeCity
          );
          return takeCityObj?.children || [];
        }
      },
      regionDataList4() {
        if (this.orderInfo.backProvince) {
          const backProvinceObj = this.regionDataList.find(
            item => item.label == this.orderInfo.backProvince
          );
          return backProvinceObj?.children || [];
        } else {
          return [];
        }
      },
      regionDataList5() {
        if (this.regionDataList4.length == 1) {
          this.orderInfo.backCity = this.regionDataList4[0].label
        }
        if (this.orderInfo.backCity) {
          const backCityObj = this.regionDataList4.find(
            item => item.label == this.orderInfo.backCity
          );
          return backCityObj?.children || [];
        }
      }
    },
    methods: {
      timeChange(val) {
        this.orderInfo.selectDate = val;
      },
      // 显示模态框
      show() {
        this.isShowModal = true;
        this.isSend = false;
        this.addressText = '';
        this.clearHandle();
      },

      // 关闭模态框
      hide() {
        this.isShowModal = false;
      },
      clearHandle() {
        this.orderInfo = {
          plantType: 2,
          voucherCode: '',
          username: '',
          totalAmount: '',
          takeProvince: '',
          takeCity: '',
          takeCounty: '',
          backProvince: '',
          backCity: '',
          backCounty: '',
          selectDate: '',
          selectTime: '',
          goodsNum: ''
        };
      },
      confirm() {
        if (this.isSend) {
          return;
        }
        this.$refs.formRef.validate(valid => {
          console.log(valid);

          if (valid) {
            this.isSend = true;
            const params = {
              ...this.orderInfo,
              takePreTimeEnd: this.takePreTimeEnd,
              takePreTimeStart: this.takePreTimeStart
            };
            console.log(params)
            this.axios.post('/orderMall/addOrder', params).then(res => {
              this.isSend = false;
              this.$emit('confirm')
              this.hide();
            });
          } else {
            this.$Message.error('请输入正确信息');
          }
        });
      },
      setTakeData(data) {
        this.orderInfo.takeProvince = data.province;
        this.orderInfo.takeCity = data.city;
        this.orderInfo.takeCounty = data.county;
        this.orderInfo.takeMan = data.person;
        this.orderInfo.takePhone = data.phonenum;
        this.orderInfo.takeAddress = `${data.town}${data.detail}`;
      },
      setbackData(data) {
        this.orderInfo.backProvince = data.province;
        this.orderInfo.backCity = data.city;
        this.orderInfo.backCounty = data.county;
        this.orderInfo.backMan = data.person;
        this.orderInfo.backPhone = data.phonenum;
        this.orderInfo.backAddress = `${data.town}${data.detail}`;
      },
      translateHandle(type) {
        if (!this.addressText) {
          return;
        }
        this.axios
          .post(`/common/autoAddress`, {
            addressText: trim(replace(this.addressText, /\s+/g, ''))
          })
          .then(res => {
            const data = res.data;
            if (type == 2) {
              this.setTakeData(data);
            } else if (type == 3) {
              this.setbackData(data);
            } else {
              this.setTakeData(data);
              this.setbackData(data);
            }
          });
      }
    }
  };
</script>

<style scoped lang="less">
  /deep/.ivu-row {
    margin-bottom: 5px;
  }
  .j-order-image {
    display: flex;

    .j-order-image-main {
      width: 130px;
      height: 130px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .j-order-image-info {
      margin-left: 10px;

      .j-order-goods-sku {
        margin-top: 5px;
      }

      .j-order-goods-price {
        margin-top: 5px;
      }

      .j-order-goods-num {
        margin-top: 5px;
      }
    }
  }
</style>
